<template>
  <div class="index-pay">
    <div class="index-pay-box">
      <span class="index-pay-box-name">近 7 天交易浏览用户趋势</span>
      <!--      <div class="index-pay-box-select">
              <el-button-group>
                <el-button size="mini" type="primary">近七天</el-button>
                <el-button size="mini">本月</el-button>
                <el-button size="mini">本年</el-button>
              </el-button-group>
            </div>-->
      <div class="index-pay-box-charts">
        <ve-line :data="chartData" :legend-visible="false" :settings="chartSettings" height="300px"/>
      </div>
    </div>
  </div>

</template>
<script>
export default {
  data() {

    this.chartSettings = {
      scale: [true, true],
      area: true,
      labelMap: {
        "date": "日期",
        "watchNum": "浏览量"
      },

    }
    return {
      chartData: {
        columns: ['date', "watchNum"],
        rows: [
          {'date': '2-10', "watchNum": 0},
          {'date': '2-11', "watchNum": 3747},
          {'date': '2-12', "watchNum": 2747},
          {'date': '2-13', "watchNum": 1247},
          {'date': '2-14', "watchNum": 1747},
          {'date': '2-15', "watchNum": 1448},
          {'date': '2-16', "watchNum": 1744},
          {'date': '2-17', "watchNum": 4547},
          {'date': '2-18', "watchNum": 4477},
          {'date': '2-19', "watchNum": 0},
        ]
      }
    }
  },
  mounted() {
    console.log(this.chartData, "@@@")
  }
}
</script>
<style lang="scss" scoped>

.index-pay {
  width: 100%;
  height: auto;
  background: #ffffff;
  border-radius: 5px;
  padding: 15px;
  box-sizing: border-box;
}

.index-pay-box {
  width: 100%;
  /* height: 300px; */
  border: 1px solid #E6E6E6;
  position: relative;
  padding: 20px 15px;
  box-sizing: border-box;
}

.index-pay-box-name {
  position: absolute;
  width: 100px;
  height: 30px;
  background: #ffffff;
  display: inline-block;
  text-align: center;
  line-height: 30px;
  font-size: 13px;
  color: #000000;
  left: 25px;
  top: -15px;
}

.index-pay-box-select {
  width: 100%;
  height: 40px;
  /* background: burlywood; */
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 10px;
}

.index-pay-box-charts {
  width: 100%;
  height: 300px;
}

</style>
